<template>
	<view class="page page--divider">
  <headerline shownav=true  isback="true" @tapnav="tapnav"   :navstyle="navstyle"  :navitem="navitem"  :navselect="navselect" :statusbarheight='statusBarHeight'  :menuitem="menuitem"    @tapmenu="tapmenu" :rightmenu=false  ></headerline>
    
    

         
         <view id="grouplist" class="grouplist">
             
             <block v-for="(m,index) in groupData" :key='index'>
               <li  v-if="(navselect==0 && m.createid==userid) || (navselect==1 && m.createid!=userid) "  @tap="gochat(m)" >
                   <div class="avatar">
                      
                      <image :src="imgshow(m.avatar)"></image>
                      </div>
                       <div class="info">
                               <div class="title">{{m.name}}</div>
                               <div>
                                   <uni-icons type='person' style="font-size: 16px;font-weight: 700;"></uni-icons>
                               {{m.people_count}}/{{m.people_max}}人</div>
                               <div class="tag">{{m.tags}}</div>
                   </div></li>  
                 
                 
             </block>
     
         
         </view>
         
         <view class="loading"  v-if="loading">
         	<view class="spinner">
         		<view class="rect1"></view>
         		<view class="rect2"></view>
         		<view class="rect3"></view>
         		<view class="rect4"></view>
         		<view class="rect5"></view>
         	</view>
         </view>
      
<tabbar></tabbar>
	</view>
</template>

<script>

	import api from "../../library/index.js"
import headerline from '../../components/header.vue'
import http from "../../library/http.js"
   import uniIcons from '../../components/uni-icons/uni-icons.vue'
    import tabbar from '../../components/tabbar.vue'
  var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ;
	export default {
   components: {
  uniIcons,
      headerline,
     tabbar
      },
		data() {
			return {
            statusBarHeight: statusBarHeight+ 'px',
				newfriendNotify: false,
				showMenu: false,
				initializing: true,
                groupData: uni.getStorageSync(uni.getStorageSync('access_token')+'_groups'),
           navitem:['我创建的群','我加入的群'],
           navselect:0,
           navstyle:"width:50%;left:25%",
           userid:uni.getStorageSync('access_token'),
           loading:true,
           user:uni.getStorageSync('userInfo'),
           menuitem:[
       
           ]
			}
		},

		methods: {
          tapnav(num){
              this.navselect=num;
           
          },
                    
         paramClick(e) {
         	let page, params;
         	if (e.type === 'friend') {
         		const {
         			id,
         			nickname,
         			avatar
         		} = e;
         		params = {
         			id,
         			nickname,
         			avatar
         		};
         		page = 'friend.detail';
         	} else if (e.type === 'room') {
         		page = 'group.chat';
         		params = e
         	}
   
         	this.$jump(page, params);
         },
			getMyGroup() {
           
                let data = {
                             
                   userid:this.userid
                }
                this.loading=true;
				api.getMyGroup(data).then(re => {
                    
					uni.setStorageSync(this.userid+'_groups', re.data)
					for (let i in re.data) {
						re.data[i].type = 'room'
					}
					this.groupData = re.data
                    this.loading=false;
			
				});
			},
          imgshow(image_url){
                 if(image_url.indexOf('http')<=-1) image_url=config.imgUri+image_url;
                return this.image_cache(image_url)
          },
          gochat(m){
              this.$jump('group.chat', {
              	id: m.id,
              	nickname: m.name
              });
          },
          tapmenu(num){
              if(this.$action.loginTips('未登录用户，无法完成此操作','/pages/game/index') ==false) return false;
               if(this.$action.check_userlock()==false) return false;
            if(num==0){
           
              
              if(this.user.isvip==1){
                  
                  if(this.isadd==true){
                      uni.showModal({
                      	title: '提示',
                      	content:this.addtips,
                      	showCancel: true,
                      	cancelText: '取消',
                      	confirmText: '继续发布',
                      	success: res => { 
                      		if(res.confirm){
                                   this.$jump('plan.add',{gameid:this.gameid}); 
                              }
                      	}
                      });
                  }else{
                      uni.showToast({
                          title:this.addtips,
                          icon:'none'
                      })
                  }
                  
              }else{
                 if(this.user.mobile==''){
                   uni.showModal({
                   	title: '提示',
                   	content: "您还没有绑定手机号，不能申请计划员",
                   	showCancel: true,
                   	cancelText: '关闭',
                   	confirmText: '绑定手机号',
                   	success: res => { 
                   		if(res.confirm) {
                             uni.navigateTo({
                               url:"/pages/mine/mobile" 
                             })
                   		}
                   	}
                   });  
                 }
                 else{
                     this.$jump('plan.apply');
                 }
              }
            
            }  
            else if(num==1){
                
                  if(this.user.nickname==''){
                    this.$action.profileTips('未设置昵称，不能创建群','/pages/group/create')   ;
                   return false;
                  }
                  else
                this.jump('group.create');
            }
            else if(num==2){
                this.jump('mine.recharge')
            }
            else if(num==3){
                this.jump('mine.cash')
            }
            else if(num==4){
               return uni.scanCode({
               	success(res) {
               		scode.getScode(res)
               	},
               	fail(e) {
               		console.log(JSON.stringify(e));
               		console.log('扫码失败')
               	}
               }); 
            }
          },
                jump(url){
                 this.$jump(url);  
                },
          setrightmenu(){
              if(this.user.id>0){
            
                
              this.getaddtips();
              }
            var menuitem=[];
             if(this.user.isvip==1){
                  menuitem.push({'title':'发布计划','icon':'plusempty'});
                 
             }
             else{
                 
              menuitem.push({'title':'申请计划员','icon':'plusempty'});
             }
            menuitem.push({'title':'创建群组','icon':'personadd'});
              menuitem.push({'title':'我要充值','icon':'plus'});
               menuitem.push({'title':'我要提现','icon':'minus'});
               
               // #ifdef APP-PLUS
              menuitem.push({'title':'扫一扫','icon':'scan'});
                // #endif 
            
                            
            
            this.menuitem=menuitem;
          },
           getaddtips(){
           http.setWait(false).post('plan.php?act=addplantips',{from:'app',userid:this.user.id}).then(res=>{
             if(res.code==200){
                  this.isadd=res.isadd;
                  this.addtips=res.data;
                }      
             });
             
           },
		
		},
		
		onShow() {
			
			this.getMyGroup();   
           this.setrightmenu();

		},
		onLoad(opts) {
		if(opts.method>0) this.navselect=opts.method;
		}
	}
</script>

<style lang="scss" scoped>
     @import "@/static/css/group.css";

    .item {
        height: 100upx;
    	border-bottom: 1px solid #F0F0F0;
    	overflow: hidden;
    	padding: $uni-spacing-col-lg 30upx;
    	display: flex;
    	flex-direction: row;
    	justify-content: flex-start;
    	align-items: center;
        background-color: #ffffff;
        border-radius: 20upx;
        
    }
    
    .leftImg {
    	width: 100upx;
    	height: 100upx;
    	margin-right: $uni-spacing-row-base;
    	border-radius: $uni-border-radius-base;
    	display: flex;
    	flex-flow: wrap;
    	justify-content: center;
    	background-color: #eee;
    	align-items: center;
    
    	&:not(image) {
    		padding: 1upx;
    	}
    
    	view,
    	image {
    		width: (76upx-2upx*4)/3;
    		height: (76upx-2upx*4)/3;
    		margin: 1upx;
    	}
    }
    
    .rightContent {
    	flex: 1;
    }
    
    .rightContent,
    .topCont {
    	overflow: hidden;
    	line-height: 1.25;
    }
    
    .topCont {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	align-items: center;
    }
    
    .userName {
    	color: $uni-text-color;
    	font-size: 38upx;
    }
    
    .time {
    	color: #999999;
    	font-size: 30upx;
    }
    
    .bottomCont {
    	width: 100%;
    	font-size: 24upx;
    	color: #999999;
    
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    }
    
    .content {
        font-size: 28upx;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    
    .badge {
    	background-color: red;
    	color: #fff;
    	border-radius: 40upx;
    	line-height: 40upx;
    	width: 40upx;
    	height: 40upx;
    	font-size: 24upx;
    	text-align: center;
    	flex-shrink: 0;
    }
    .loading {
    	//loading动画
    	display: flex;
    	justify-content: center;
    
    	@keyframes stretchdelay {
    
    		0%,
    		40%,
    		100% {
    			transform: scaleY(0.6);
    		}
    
    		20% {
    			transform: scaleY(1.0);
    		}
    	}
    
    	.spinner {
    		margin: 20upx 0;
    		width: 60upx;
    		height: 25px;
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    
    		view {
    			background-color: #ff9800;
    			height: 25px;
    			width: 3px;
    			border-radius: 3px;
    			animation: stretchdelay 1.2s infinite ease-in-out;
    		}
    
    		.rect2 {
    			animation-delay: -1.1s;
    		}
    
    		.rect3 {
    			animation-delay: -1.0s;
    		}
    
    		.rect4 {
    			animation-delay: -0.9s;
    		}
    
    		.rect5 {
    			animation-delay: -0.8s;
    		}
    	}
    }
</style>
